<template>
  <view class="card_record">
    <uni-nav-bar @clickLeft="$ui.back()" dark color="#FFD76B" backgroundColor="#323232" background-color="#007AFF"
      left-icon="left" status-bar title="我的DDC交易委托" />
    <view class="detail">
      <view class="detail-box" v-for="(item,index) in list" :key="index">
        <view class="flex-row-center">
          <text class="buy">{{item.trading_type == 0?'买单':'卖单'}}</text>
          <text
            style="font-size: 30rpx;font-family: PingFang SC;font-weight: 400;color: #999999;margin-left: 12rpx;">{{item.trading_payment_time/60}}分钟付款</text>
        </view>
        <view style="text-align: right;">
          <text class="jy">交易：</text>
          <text style="margin-right: 10rpx;">{{item.trading_number}}</text>
          <text class="jy">{{item.trading_currency_name}}</text>
        </view>
        <view style="font-size: 24rpx;font-family: PingFang SC;font-weight: 500;color: #999999;">限额：{{item.trading_min}}
        </view>
        <view style="height: 1rpx;border-bottom: 1rpx solid #E4E4E4;margin-top: 30rpx;margin-bottom: 41rpx;"></view>
        <view class="flex-row-between-center">
          <view>
            <text style="font-size: 24rpx;font-family: PingFang SC;font-weight: 400;color: #999999;">实付：</text>
            <text style="">{{item.trading_number}}{{item.trading_currency_name}}</text>
          </view>
          <view @click="cancekClick(item)"
            style="width: 86rpx;height: 46rpx;background: #333333;border-radius: 6rpx;text-align: center;line-height: 46rpx;font-size: 24rpx;font-family: PingFang SC;font-weight: 400;color: #FFFFFF;">
            取消</view>
        </view>
      </view>
    </view>
  </view>
  </view>
</template>

<script>
  import {
    getUserTrading,
    cancelTrading
  } from '../../api/cardService/card.js'
  export default {
    data() {
      return {
        page: 0,
        list: []
      }
    },
    methods: {
      async getList(type = 'get') {
        const res = await getUserTrading({
          code: 'pibc',
          way: 0,
          page: this.page
        })
        if (type == 'push') {
          if (res.data && res.data.length != '0') {
            this.list.push(res.data)
          }
          uni.hideLoading()
        } else {
          this.list = res.data
          uni.hideLoading()
        }
        // type 买单0 卖单1
      },
      cancekClick(item) {
        console.log(item, '');
        cancelTrading({
          id: item.trading_id
        }).then(res => {
          console.log(res);
          if (res.code == 200) {
            this.list.forEach((item1, index, arr) => {
              if (item1.trading_id == item.trading_id) {
                arr.splice(index, index + 1)
                setTimeout(() => {
                  this.$ui.toast('取消成功')
                }, 500)
              }
            })
          }
        }).catch(err => {
          console.log(err, 123);
        })
      }
    },
    onReachBottom() {
      this.page++
      this.$ui.loading('加载中')
      this.getList('push')
    },
    onLoad() {
      this.$ui.loading('加载中')
      this.getList()
    }

  }
</script>

<style lang="less" scoped>
  .card_record {
    .detail {
      box-sizing: border-box;
      padding: 40rpx;

      .detail-box {
        height: 318rpx;
        background: #FFFFFF;
        border-radius: 10rpx;
        box-sizing: border-box;
        padding: 36rpx;
        margin-bottom: 30rpx;

        .buy {
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #FB3D3D;
        }

        .sell {
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: bold;
          color: #83CD5F;
        }

        .jy {
          height: 23rpx;
          font-size: 24rpx;
          font-family: PingFang SC;
          font-weight: 400;
          color: #FB3D3D;
        }
      }
    }
  }
</style>
